<template>
  <div>
    <SearchBar @onSearch="handleSearch">
      <SearchBarItem label="机构:" :labelLg="5">
        <RemoteCascader
          :api="orgApi"
          valueKey="id"
          v-model="queryParam.orgUser.orgId.value"
          needQueryParam
          :queryParam="{
            parentId:{
              value: ';'
            }
          }"
          afterQueryParam="parentId"
          lastValue
          clearable
        />
      </SearchBarItem>
      <SearchBarItem label="用户名:">
        <Input type="text" v-model="queryParam.name.value" placeholder="请输入, 支持模糊查询" clearable />
      </SearchBarItem>
      <SearchBarItem label="邮箱:">
        <Input type="text" v-model="queryParam.email.value" placeholder="请输入, 支持模糊查询" clearable />
      </SearchBarItem>
      <SearchBarItem label="电话:">
        <Input type="text" v-model="queryParam.phone.value" placeholder="请输入, 支持模糊查询" clearable />
      </SearchBarItem>
      <SearchBarItem label="主键:" slot="more" :labelLg="5">
        <Input type="text" v-model="queryParam.id.value" placeholder="请输入" clearable />
      </SearchBarItem>
      <SearchBarItem label="状态:" slot="more">
        <Select v-model="queryParam.status.value" placeholder="请选择" clearable>
          <Option :value="0">启用</Option>
          <Option :value="1">禁用</Option>
        </Select>
      </SearchBarItem>
    </SearchBar>
    <RemoteTable :namespace="namespace" :columns="columns">
      <Authc permissions="auth:user:add">
        <Button type="primary" to="add">新增</Button>
      </Authc>
    </RemoteTable>
  </div>
</template>

<script>
import RemoteTable from "@/components/RemoteTable";
import SearchBar from "@/components/SearchBar";
import Authc from "@/components/Authc";
import config from "@/utils/config";
import Action from "./Action";
import RemoteCascader from "@/components/RemoteCascader";
import { namespace } from "../module";
import { Button, Input, InputNumber, Tag, Select, Option } from "view-design";
import OrgTag from "./OrgTag";
export default {
  name: "UserListView",
  components: {
    RemoteTable,
    Button,
    Input,
    SearchBar,
    SearchBarItem: SearchBar.SearchBarItem,
    InputNumber,
    RemoteCascader,
    Authc,
    Select, 
    Option
  },
  data: function() {
    return {
      namespace: namespace,
      columns: [
        {
          title: "id",
          key: "id",
          align: "center",
          width: 250,
          fixed: "left"
        },
        {
          title: "用户名",
          key: "name",
          align: "center",
          minWidth: 200
        },
        {
          title: "邮箱",
          key: "email",
          align: "center",
          minWidth: 300
        },
        {
          title: "电话",
          key: "phone",
          align: "center",
          width: 200
        },
        {
          title: "机构",
          key: "orgNames",
          align: "center",
          width: 200,
          render(h, data) {
            return h(OrgTag, {
              props: {
                record: data.row
              }
            });
          }
        },
        {
          title: "状态",
          key: "status",
          align: "center",
          width: 100,
          render(h, data) {
            if (data.row.status == 0) {
              return h(
                Tag,
                {
                  props: {
                    color: "success"
                  }
                },
                "正常"
              );
            } else {
              return h(
                Tag,
                {
                  props: {
                    color: "error"
                  }
                },
                "禁用"
              );
            }
          }
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          permissions: "",
          width: 90,
          render: function(h, data) {
            return h(Action, {
              props: {
                row: data.row
              }
            });
          }
        }
      ]
    };
  },
  computed: {
    queryParam: {
      get() {
        return this.$store.state[namespace].query;
      },
      set(value) {
        this.$store.commit(`${namespace}/saveState`, {
          query: value
        });
      }
    },
    orgApi() {
      return config.serverProxy + config.authServicePath + "/org/getOptions";
    }
  },
  methods: {
    handleSearch() {
      let queryParam = this.queryParam;
      this.$store.dispatch(`${namespace}/query`, {
        limit: {
          currentPage: 1
        }
      });
    }
  }
};
</script>

<style>
</style>